@import '../app/variables.css';

:root {
  --grid-padding-L: var(--box-padding-left-L);
  --grid-padding-M: var(--box-padding-left-M);
  --grid-padding-XS: var(--box-padding-left-M);
  --list-bottom-padding-m: 120px;
  --list-bottom-padding-s: 90px;
}

.box {
  box-shadow: none;
  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px;
}

.leftText {
  text-align: left;
  padding-left: 0px;
}

.wrapper {
  width: 100%;
}

.table {
  & :global thead th:first-child {
    display: none !important;
  }

  & ul {
    list-style-type: none;
    line-height: 48px;
    margin: 0;
  }
}

.upVoteRow {
  background: #caf8ff !important;
}

.downVoteRow {
  background: #fed9d9 !important;
}

.actionBar {
  margin-top: 9px;
  display: inline-block;
}

.votesMenuButton {
  margin-right: 16px;
  margin-top: 8px;

  & span {
    vertical-align: top;
    line-height: 24px;
    margin-left: 6px;
  }
}

.voted {
  color: #7cb342;
}

.unvoted {
  color: #c62828;
}

.menuItem {
  flex-direction: row-reverse;
  width: 241px;
}

.icon {
  text-align: right;
  width: auto;
}

.menuInner {
  height: 306px;
  overflow-y: auto;
}

.button {
  width: auto;
  margin-top: 18px;
  margin-right: 16px;
}

.rotated {
  transform: rotate(45deg);
}

.voteButton {
  color: var(--color-black) !important;
  position: relative;
  top: 3px;
}

.productivity {
  text-align: right;
}

.delegatesList {
  overflow-y: auto;

  & .tableHead {
    flex-wrap: nowrap;

    & li {
      color: var(--color-grayscale-dark) !important;
      font-size: 15px !important;
      transition: all ease 200ms;
      font-weight: 700;
    }

    & .productivity {
      direction: rtl;
    }
  }

  & .row {
    background: linear-gradient(90deg, var(--color-white) 0%, #f5f8fc 82%);
    flex-wrap: nowrap;

    &:nth-child(2n) {
      background: var(--color-white);
    }

    & li {
      color: var(--color-grayscale-dark);
      font-size: 16px;
      font-weight: 400;

      &:last-child {
        font-weight: 300;
      }
    }
  }
}

.safariHack {
  transform: translateZ(0);
}

.username {
  overflow: hidden;
  text-overflow: ellipsis;
}

.showChangeSummery {
  & .filters .filter:not(.search) {
    display: none;
  }

  & .delegatesList {
    & .input,
    & .row:not(.upVoteRow):not(.downVoteRow) {
      display: none;
    }
  }

  & .row li,
  & .tableHead li {
    &:first-child {
      display: none !important;
    }
  }
}

.emptyMessage {
  text-align: center;
  color: var(--color-grayscale-dark);
  padding: 23px 0;
  font-weight: 500;
}

@media (--xLarge-viewport) {
  .delegatesList {
    margin: 0px calc(0 - var(--box-padding-left-XL));

    & .table {
      & ul {
        padding: 0 var(--box-padding-left-XL);
      }
    }

    & .row {
      padding: 11px var(--box-padding-left-XL);
    }
  }
}

@media (--large-viewport) {
  .delegatesList {
    margin: 0px calc(0 - var(--box-padding-left-L));

    & .row {
      padding: 0px var(--grid-padding-L);
    }

    & .table {
      & ul {
        padding: 0 var(--box-padding-left-L);
      }
    }
  }
}

@media (--medium-viewport) {
  .wrapper {
    overflow: auto;
    height: 100%;
    min-height: 100%;
  }

  .delegatesList {
    height: auto;
    overflow-y: visible;
    padding-bottom: var(--list-bottom-padding-m);
    margin: 0px calc(0 - var(--box-padding-left-M));

    & .table {
      & ul {
        padding: 0 var(--box-padding-left-M);
      }
    }

    & .row,
    & .tableHead {
      padding-left: var(--grid-padding-M);
      padding-right: var(--grid-padding-M);
    }

    & .tableHead li:nth-child(4),
    & .row li:nth-child(4) {
      display: none;
    }

    & .tableHead li {
      font-size: 12px !important;
    }
  }

  .showChangeSummery {
    & .filters .search {
      display: none;
    }

    & .delegatesList {
      & .row li:nth-child(3),
      & .tableHead li:nth-child(3) {
        flex-basis: 58.3% !important;
        max-width: 58.3% !important;
      }
    }
  }

  footer {
    margin: 0px calc(0 - var(--box-padding-left-M));
    padding: 0 var(--box-padding-left-M);
  }
}

@media (--small-viewport) {
  .delegatesList {
    padding-bottom: var(--list-bottom-padding-s);
  }
}
